<?php
use kartik\select2\Select2;

$this->title = "占位";

?>
<style type="text/css">
	.title{background-color: #FFFFFF;text-align: center;font-size: 16px;padding: 15px;}
	.room-header{background-color: #FFFFFF;font-size: 16px;padding: 15px;color: #01BBBD;border-bottom: 1px solid #ddd;border-top: 1px solid #ddd;}
	.room-list{background-color: #FFFFFF;font-size: 14px;}
	.room-list .list_1 {border-bottom: 1px solid #ddd;}
	.room-list .list_1 .one{width: 100%;padding:0px 10px;height: 40px;line-height: 30px;font-size: 14px; }
	.room-list .list_1 .one .label_1{width: 30%;line-height:30px;float: left}
	.room-list .list_1 .one .num_1{width: 70%;float: left;}

	.room-list .list{width: 100%;padding: 10px;border-bottom: 1px solid #ddd;height: 60px;line-height: 30px;font-size: 14px;}
	.room-list .list .label_2{width: 30%;float: left;line-height:40px; }
	.room-list .list .num_2{width: 70%;float: left;line-height: 40px}
	.room-list .list .num_2 input{height: 34px}

	.mui-btn-sub{background-color: #01BBBD;border:1px solid #01BBBD;color: #FFFFFF;}
	.select2-container--krajee{display:inherit;}

	
	.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{color: #A664A6;}
  	.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{top:0;}
  	.mui-checkbox.mui-left label, .mui-radio.mui-left label{font-weight: normal;}
	
</style>

<div class="mui-content">

	<input type="hidden" name="user_id" id="user_id" value="<?=\Yii::$app->user->identity->id?>">	
	
	<div class="title">
		<?=$product->name?>
	</div>
	<div class="room-header">
		 占位房间	
	</div>
	<div class="room-list">
		<form action="/front/default/set-room" method="post" id="setRoomForm">
		<input type="hidden" value="<?php echo Yii::$app->getRequest()->getCsrfToken(); ?>" name="_csrf" />
		<input type="hidden" name="Order[product_id]" value="<?=$product->id?>">
		<input type="hidden" name="Order[member_id]" value="<?=\Yii::$app->user->identity->id?>">

		<?php if(!empty($data)){?>
		<?php foreach($data as $key=>$v){ ?>
			<div class="list_1">
				<input type="hidden" name="room[<?=$key?>][room_id]" value="<?=$v->room_id?>">
				<div class="one">
					<span style="color: #A664A6;line-height: 30px;"><?=$v->room_name?></span>
					<?php if($product->stock == 1){ ?>
					<span style="color: #A664A6;line-height: 30px;margin-left: 10px;"><?=$v->people_num?>人</span>
					<?php }?>
				</div>
				<div class="one">
					<div class="label_1">
						房间数：	
					</div>
					<div class="num_1">
						<div class='box'>
							<div class='mui-numbox' data-numbox-step='1' data-numbox-min='1' data-numbox-max='<?=$v->room_num?>'>
							<button class='mui-btn mui-numbox-btn-minus' type='button'>-</button>
							<input class='mui-numbox-input room_num' type='number' name='room[<?=$key?>][room_num]' data-room-id='<?=$v->room_id?>' />
							<button class='mui-btn mui-numbox-btn-plus'  type='button'>+</button>
							</div>
						</div>
					</div>
				</div>	
				<div class="one room_id_<?=$v->room_id?>" style="<?=($product->stock == 1)?'display: none':''?>">
					<div class="label_1">
						入住人数：	
					</div>
					<div class="num_1">
						<div class='box'>
							<div class='mui-numbox' data-numbox-step='1' data-numbox-min='1' data-numbox-max='99'>
							<button class='mui-btn mui-numbox-btn-minus' type='button'>-</button>
							<input class='mui-numbox-input' type='number' name='room[<?=$key?>][num][]' value="<?=$v->people_num?>" />
							<button class='mui-btn mui-numbox-btn-plus'  type='button'>+</button>
							</div>
						</div>
					</div>
				</div>	

			</div>
		<?php }?>
		<?php }?>
		<div class="list">
			<div class='mui-row'>
				<div class='mui-col-xs-6'>
					<div class='mui-input-row mui-radio mui-left'>
						<label>直客</label>
						<input name='Order[source]' type='radio' value='1' checked='checked'>
					</div>
				</div>
				<div class='mui-col-xs-6'>
					<div class='mui-input-row mui-radio mui-left'>
						<label>同业</label>
						<input name='Order[source]' type='radio' value='2'>
					</div>
				</div>
			</div>
		</div>	
		<div class="list">
			<div class='mui-row'>
				<div class='mui-col-xs-6'>
					<div class='mui-input-row mui-radio mui-left'>
						<label>不需要拼住</label>
						<input name='Order[is_merge]' type='radio' value='1' checked='checked'>
					</div>
				</div>
				<div class='mui-col-xs-6'>
					<div class='mui-input-row mui-radio mui-left'>
						<label>需要拼住</label>
						<input name='Order[is_merge]' type='radio' value='2'>
					</div>
				</div>
			</div>
		</div>	
		<div class="list">
			<div class="label_2">
				联系人：
			</div>
			<div class="num_2">
				
				 <?= Select2::widget([
                    'name'  => 'Order[username]',
                    'attribute'  => 'username',
                    'options' => ['multiple' => false,'width'=>'80%'],
                    'pluginOptions' => array(
                        'placeholder' => Yii::t('app.order', 'Username'),
                        'allowClear' => true,
                        'tags' => true,
                        'minimumInputLength' => 1,
                        'ajax' => [
                                'url' => yii\helpers\Url::to(['/order/contact/suggest']),
                                'dataType' => 'json',
                                //'data' => new JsExpression('function(params) { return {q:params.term}; }')
                        ],
                    ),
					'pluginEvents' => [
        				"change" => "function(event){
        				    var name = event.target.value;
							// 获取联系人其它信息
							if(name){
								$.get('/order/contact/find-name', { name: name},
									function(data){
										if(data.company){
											$('#order-company').val(data.company);
										}
										if(data.phone){
											$('#order-phone').val(data.phone);
										}
								});
							}
        				}",
    				],
            ]) ?>
			</div>
	</div>

	<div class="list">		
		<div class="label_2">
			手机号码：
		</div>
		<div class="num_2">
			<input type="text" id="order-phone" name="Order[phone]" value="">
		</div>
	</div>	
	<div class="list">
		<div class="label_2">
			公司名称：
		</div>
		<div class="num_2">
			<input type="text" id="order-company" name="Order[company]" value="">
		</div>
	</div>

	<div class="list" style="height: 90px">
		<div class="label_2">
			备注：
		</div>
		<div class="num_2">
			<textarea id="order-remark" name="Order[remark]"></textarea>
		</div>
	</div>

		<div class="list">
			<div class="button" style="text-align: center;">
				 <button class="mui-btn mui-btn-sub">提交</button>
			</div>
		</div>

		</form>
		

	</div>

	

</div>


<?php app\components\JsBlock::begin() ?>

<script type="text/javascript">
	mui(".mui-numbox").numbox().setValue(1);
	jQuery(".room_num").change(function(){
		 var num = jQuery(this).val();
		 var room_id = jQuery(this).attr("data-room-id");
		 var class_r = ".room_id_"+room_id; 
		 var rooms = jQuery(class_r);
		 var rooms_one = rooms.length;
		 if(num > rooms_one){
		 	var copy_num = parseInt(num-rooms_one);
		 	var one = jQuery(class_r+":last").clone(true);
		 	for(var i=0;i<copy_num;i++){
		 		jQuery(class_r+":last").after(one);
		 	}
		 	mui('.mui-numbox').numbox();
		 }else if(num < rooms_one){
		 	var copy_num = parseInt(rooms_one-num);
		 	for(var i=0;i<copy_num;i++){
		 		jQuery(class_r+":last").remove();
		 	}
		 }
		 
	});
</script>

<?php app\components\JsBlock::end() ?>
